/*
*保险购买
*
*/

<style lang="less">
.shiftIn{
  width: 100%;
  // height: 13.34rem;
  background: #f7f8fa;
  // padding-top: 1.68rem;
  .message{
    font-size:0.23rem;
    line-height: 0.76rem;
    padding-left: 0.29rem;
    color: #333;
  }
  .main{
    background: #fff;
    margin-top: -.3rem;
    .product-info{
      font-weight: bold;
      font-size: .28rem;
      height:.88rem;
      line-height:.88rem!important;
      padding:0px 0.29rem 0px 0.31rem;
    }
  }
  .sure{
    line-height:0.88rem;
    width:6.9rem;
    margin-left: 0.3rem;
    margin-top: 0.49rem;
    background: #EC1B30;
    font-size: 0.3rem;
    border-radius: 0.06rem;
    color: white;
    &.forbiden{
      opacity: .5;
    }
  }
  .moneyIpt{
    overflow: hidden;
    height: 1.4rem;
    font-size: 0.35rem;
    padding-left: 0.32rem;
  }
  .cell{
    font-size: 0.26rem;
    padding:0px 0.29rem 0px 0.31rem;
    height: .88rem;
    color: #333;
    line-height: 0.36rem;
  }
  .select{
    position: relative;
    display: inline-block;
    width: 0.28rem;
    height: 0.28rem;
    border: 1px solid #bfbfbf;
    margin-left:0.6rem;
    margin-right:0.21rem;
    vertical-align: top;
    &>img{
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
    }
  }
  .tip{
    border-top: 1px solid #ddd;
    font-size: 0.21rem;
    color: #999;
    line-height: 0.88rem;
    padding-left: 0.3rem;
    .num{
      margin-left: .13rem;
      margin-right: .65rem;
      color: #333;
    }
  }
  .warming{
    margin-top: 0.34rem;
    margin-left: 0.5rem;
    font-size: 0.21rem;
    color: #999;
    &>li{
      line-height: 0.4rem;
    }
  }
  .deal{
    margin-top: 0.28rem;
    padding-left: 0.3rem;
    overflow: hidden;
    &>p{
      float: left;
      width:6.43rem;
      font-size:0.22rem;
      line-height: 0.35rem;
      color: #ccc;
      .dealCheck{
        color: #3333ff;
      }
    }
    &>i{
      float: left;
      margin-left: 0px;
      margin-right: 0.15rem;
      &>img{
        vertical-align: top;
        width: 100%;
        height: auto;
      }
    }
  }
  .inputSec{
    font-size: 0.26rem;
    height: 6.4rem;
    border-radius: 0.3rem 0.3rem 0px 0px;
    background: #fff;
    text-align: center;
    &>header{
      position: relative;
      line-height: 0.88rem;
      border-bottom: 1px solid #ddd;
      &>.worry{
        position: absolute;
        top: 0.3rem;
        left: 0.3rem;
        width: 0.28rem;
        height: 0.28rem;
        background: url("../../assets/img/Financial/worry.png") no-repeat 50% 50%;
      }
    }
    .title{
      color: #999;
      font-size: .26rem;
      margin: .56rem 0px;
    }
    .num{
      font-size: .56rem;
      color: #ff6633;
    }
    &>ul{
      overflow: hidden;
      width: 3.72rem;
      margin: 0 auto;
      li{
        list-style:none;
        float: left;
        width: .4rem;
        height: .5rem;
        border-bottom: 1px solid #ccc;
        margin: 0px .11rem;
        &>input{
          border-style: none;
          width: 100%;
          height: 100%;
          text-align: center;
          outline: none;
          font-size: .3rem;
        }
      }
    }
  }
  .pay-account{
    height:.88rem;
    line-height:.88rem;
    margin-left:.3rem;
    color:#333333;
    font-size:.28rem;
    border-top: 1px solid #f0f0f0;
    &>input{
      border:none;
      outline: none;
      width:70%;
      padding-left:.49rem;
      color:#CCCCCC;
      font-size:.26rem;
    }
  }
}
</style>

<template>
  <div class="dy-main shiftIn">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">转入</x-header>
      <!-- <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">转入</x-header> -->
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <!-- <scroller lock-x style= 'height: 100%;'> -->
          <div class="scroller-box">
            <div class="message">{{FinancialName}}</div>
            <group class="main">
              <cell class="product-info" :title="aaa" :link="{path:'/PropertyInformation'}" inline-desc='产品信息'></cell>
              <popup-radio title="付款账户" :options="options1" :placeholder="options1[0]" class="cell" v-if='type === "1"'></popup-radio>
              <div class="pay-account" v-else>
                <span style="width：1.1rem;">付款账户</span><input type="text" placeholder="请输入付款账户"/>
              </div>
              <cell title="账户余额" :value="rest" class="cell"></cell>
              <cell title="分红方式" class="cell"><div class="select" @click="cashClick" style="vertical-align: middle;"><img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 1"></div>现金分红<div class="select" @click="orderClick" style="vertical-align: middle;"><img src="../../assets/img/Financial/selected.png" alt="" v-if="cash == 0"></div>红利转投</cell>
            </group>
            <group>
              <x-input title="￥" placeholder="10000.00元起购,递增500.00元" class="moneyIpt" @on-change="iptCash"></x-input>
              <div class="tip"><span>预期收益金额</span><span class="num">200</span><span>手续费</span><span class="num">20</span></div>
            </group>
            <x-button @click.native="iptSec = true" plain type="primary" class="sure" :class="{'forbiden':iptOk == true}" :disabled="iptOk">确认转入</x-button>
            <popup v-model="iptSec" position="bottom" max-height="50%">
              <div class="inputSec">
                <header><x-button @click.native="iptSec = false" plain type="primary" class="worry"></x-button><span>付款</span></header>
                <p class="title">支付金额</p>
                <p class="num">￥{{getCashNum}}</p>
                <p class="title" style="margin-bottom:10px;">输入支付密码</p>
                <ul>
                  <li v-for="item in 6" :key="item"><input type="text" maxlength="6"></li>
                </ul>
              </div>
            </popup>
            <div class="deal">
              <i class='select' @click='usaClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="USA"></i>
              <p>个人客户非美国纳税居民身份</p>
            </div>
            <div class="deal">
              <i class='select' @click='forginClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="forgin"></i>
              <p>外籍人士中国居民身份</p>
            </div>
            <div class="deal">
              <i class='select' @click='readClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="readOver"></i>
              <p>本人已经认真阅读并充分理解<a href="javascript:void(0)" class="dealCheck">《产品指南/条款及章则》</a> （含风险提示书）、<a href="javascript:void(0)" class="dealCheck">《投资协议》</a>、<a href="javascript:void(0)" class="dealCheck">《客户权益须知》</a>、<a href="javascript:void(0)" class="dealCheck">《在售个人理财产品系列清单》</a>的条款与内容,充分了解并清楚知晓本产品的风险，愿意承担相关风险。</p>
            </div>
    <!-- <p @click="gotoDetail ('FinancialBuySure')">跳转确认购买页</p> -->
          </div>
        <!-- </scroller> -->
      </div>
    </div>
    <div class="testT">ceshi</div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      type: '0',
      FinancialName: '“芙蓉景程，汇得益”2018年03月',
      options1: ['5766****666', '8977****4566', '0987*****987'],
      rest: '6000元',
      cash: 0, // 1代表选择钞，0代表选择汇
      USA: 0, // 代表美国人
      forgin: 0, // 代表外籍华裔
      readOver: 1, // 我已阅读协议
      iptSec: false, // 控制底部弹出层显隐
      iptOk: true, // 控制按钮可否点击
      getCashNum: null, // 输入的金额值
      repose: [] // 接收请求返回数据
    }
  },
  methods: {
    back () {
      // alert('6789')
      this.$publicFun.goBack(this)
    },
    cashClick: function (e) {
      let n = this.cash
      if (n === 0) {
        this.cash = 1
      }
    },
    orderClick: function (e) {
      let n = this.cash
      if (n === 1) {
        this.cash = 0
      }
    },
    readClick: function (e) {
      let n = this.readOver
      if (n === 1) {
        this.readOver = 0
      } else {
        this.readOver = 1
      }
    },
    usaClick: function (e) {
      let n = this.USA
      if (n === 1) {
        this.USA = 0
      } else {
        this.USA = 1
      }
    },
    forginClick: function () {
      let n = this.forgin
      if (n === 1) {
        this.forgin = 0
      } else {
        this.forgin = 1
      }
    },
    iptCash: function (e) {
      if (e) {
        this.iptOk = false
        this.getCashNum = e
      } else {
        this.iptOk = true
      }
    },
    refreshTest () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business', 'params': {'method_Name': 'M0401010', 'basic_Data': {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.prdList = response.data.data
          } else {
            LVm.aaa = response.data.data
          }
        }
      )
      // this.$router.push({name: 'FinancialBuySure', query: {'PayAccount': '6217298009765555', 'BuyAmt': '2001'}})
    }
  },
  created () {
    this.refreshTest()
  }
}
</script>
